﻿@page "/admin/settings/custom-css"
@Html.AntiForgeryToken()
@{
    var settings = BlogConfig.CustomStyleSheetSettings;

    <script>
        var needLoadInitValues = @((!string.IsNullOrWhiteSpace(settings.CssCode)).ToString().ToLower());
    </script>
}

@section scripts{
    <script type="text/javascript" src="https://unpkg.com/monaco-editor@latest/min/vs/loader.js"></script>
    <script>
        require.config({ paths: { 'vs': 'https://unpkg.com/monaco-editor@latest/min/vs' }});
        // Before loading vs/editor/editor.main, define a global MonacoEnvironment that overwrites
        // the default worker url location (used when creating WebWorkers). The problem here is that
        // HTML5 does not allow cross-domain web workers, so we need to proxy the instantiation of
        // a web worker through a same-domain script
        window.MonacoEnvironment = {
            getWorkerUrl: function(workerId, label) {
                return `data:text/javascript;charset=utf-8,${encodeURIComponent(`
        self.MonacoEnvironment = {
          baseUrl: 'https://unpkg.com/monaco-editor@latest/min/'
        };
        importScripts('https://unpkg.com/monaco-editor@latest/min/vs/base/worker/workerMain.js');`
                )}`;
            }
        };

        var cssContentEditor = null;

        require(['vs/editor/editor.main'], function () {
            initCssEditor();
        });

        var initCssEditor = function () {
            var cssContentEditorDiv = document.getElementById('CssContentEditor');
            cssContentEditor = monaco.editor.create(cssContentEditorDiv, {
                language: 'css'
            });
            cssContentEditor.layout();

            if (needLoadInitValues) {
                var cssValue = document.querySelector("#settings_CssCode").value;
                window.cssContentEditor.setValue(cssValue);
            }
        }

        var assignEditorValues = function () {
            var cssValue = window.cssContentEditor.getValue();
            document.querySelector("#settings_CssCode").value = cssValue;
        }
    </script>
    <script type="module">
        import * as settings from '/js/app/admin.settings.module.js';
        
        function handleSubmit(event) {
            assignEditorValues();
            settings.handleSettingsSubmit(event);
        }

        const form = document.querySelector('#form-settings');
        form.addEventListener('submit', handleSubmit);
    </script>
}

@section head{
    <style>
        .monaco-target {
            border: 1px solid #dee2e6;
            width: 100%;
            min-height: 512px;
        }
    </style>
}

<partial name="_SettingsHeader" />
<div class="ps-4 pe-4">
    <form id="form-settings" asp-controller="Settings" asp-action="CustomStyleSheet">
        <div class="form-check form-switch mb-3">
            <input type="hidden" name="EnableCustomCss" value="false">
            <input type="checkbox" name="EnableCustomCss" value="true" class="form-check-input" @(settings.EnableCustomCss ? "checked" : null)>
            <label asp-for="@settings.EnableCustomCss" class="form-check-label"></label>
        </div>

        <div id="CssContentEditor" class="monaco-target">

        </div>
        <textarea asp-for="@settings.CssCode" class="settings-csscontent-textarea d-none"></textarea>

        <div class="mt-3">
            <button type="submit" class="btn btn-outline-accent" id="btn-save-settings">
                @SharedLocalizer["Save"]
            </button>
        </div>
    </form>
</div>